<template>
    <div class="nmc-content">
      <div class="nav-back marg-B2" @click="goBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div class="nmc-wrapper">
        <div class="left" ref="scrollLeft" >
          <div v-for="(item, index) in arr" :key="index" ref='leftBox' @click="changeModel(index)"
            :class="[current==index?'active flex-one':'common flex-one']">
            {{item.name}}
          </div>
        </div>
        <div class="right">
			<div class="marg-B1">
				<el-checkbox @change="allChecked" v-model="isCheck">全省</el-checkbox>
			</div>
			<div class="main-content" v-for="(item, index) in checkList" :key="index">
				<div class="bottom-content">
				  <ul class="bottom-ul" v-if="item.children">
					<li @click="areaClick(childItem,childIndex)" class="bottom-item" :class="childActive.indexOf(childItem.id) > -1 ? 'child-active':'child-gray'" v-for="(childItem, childIndex) in item.children" :key="childItem.id">
					  {{childItem.name}}
					</li>
				  </ul>
				</div>
			</div>
        </div>
		<!-- <div class="right" ref="scroll" @scroll="handleScroll">
			<div class="main-content" v-for="(item, index) in arr" :key="index">
				<div class="bottom-content">
				  <ul class="bottom-ul" v-if="item.children">
					<li @click="areaClick(childItem,childIndex)" class="bottom-item" :class="childActive.indexOf(childItem.id) > -1 ? 'child-active':'child-gray'" v-for="(childItem, childIndex) in item.children" :key="childItem.id">
					  {{childItem.name}}
					</li>
				  </ul>
				</div>
			</div>
		</div> -->
      </div>
      <div class="btn-box">
        <el-button class="btn gray marg-R3" @click="cancelClick">取消</el-button>
        <el-button class="btn b-bg" type="primary" @click="handleCheckedSure">确认</el-button>
      </div>
    </div>
</template>

<script>
import {request} from "../assets/js/utils/request";
import mixin from '@/assets/js/mixin'
export default {
  mixins: [mixin],
    data() {
      return {
        leftClickFlag: false,
        arr: [],
        current: 0,
        listHeight: [],
        scrollY: 0,
        childActive: [],
        isCheck: false,
        checkList: []
      }
    },
    created() {
        this.initData()
    },
  mounted() {
    this.$nextTick(() => {
      // this.getBoxHeight();
      this.current = 0;
      this.changeModel(0);
    });
  },
  methods: {
	allChecked() {
		if(this.isCheck) {
			this.checkList[0].children.forEach((obj) => {
				this.areaClick(obj)
			})
		} else {
			this.childActive = []
		}
	},
    cancelClick() {

    },
    handleCheckedSure() {
      // let categorArr = this.childActive.map(item => item.toString());
      // console.log(categorArr,'this.labelValue')
      const formData = new FormData();
      formData.append('city_id',this.childActive);
      request({
          url: '/user/push/city',
          method: 'POST',
          data: formData
      }).then(res => {
          if(res.code == 200) {
              this.$message({
                  message: '添加成功',
                  type: 'success'
              });
              this.goBack()
          } else {
              this.$message.error(res.message);
          }
      })
    },
    areaClick(params) {
		let cityIndex = this.childActive.indexOf(params.id);
		if (cityIndex > -1) {
			this.childActive.splice(cityIndex, 1);
		} else {
			this.childActive.push(params.id);
		}
    },
    initData() {
      // 已选择区域
      request({
        url: `/user/push/city-list`,
        method: 'GET'
      }).then(res => {
        if(res.code == 200) {
          let list = res.data.list || []
          list.forEach(obj => {
            let cityId = (obj.city_id).toString();
            this.childActive.push(cityId)
          })
        } else {
          this.$message.error(res.message);
        }
      })
      // 区域数据
      request({
          url: '/config/region',
          method: 'GET',
      }).then(res => {
          if(res.code == 200) {
              this.arr = res.data.list || []
      this.checkList = this.arr.filter((obj,index) => index == 0)
              // this.updateCities()
              // this.categoryList = this.modifyArray(res.data.list)
          }
      })
    },
    getBoxHeight() {
      setTimeout(() => {
        //延时计算元素的宽度
        let rightItems = this.$refs.scroll.getElementsByClassName("main-content"); //获取指定类名的所有元素
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < rightItems.length; i++) {
          let item = rightItems[i]; // 右边的每一个模块（蓝色标题 + 标题下面所带的内容）
          height += item.clientHeight;
          this.listHeight.push(height); // 把右边模块内容的高度全都放到一个数组中
        }
        this.arr.forEach((item, index) => {
          // 把上面弄的那些高度分别放入总数据中，方便点击左边让右边滚动到所对应的模块
          this.$set(item, "distance", this.listHeight[index]);
        });
      }, 1000); //增加延时，等图片渲染完毕后进行计算
    },
    changeModel(index) {		
        // if (index == 0) {
        //     this.$refs.scroll.scrollTop = 0;
        // } else {
        //     this.$refs.scroll.scrollTop = this.arr[index].distance;
        // }
        this.current = index;
		this.checkList = this.arr.filter((obj,itemIndex) => itemIndex == index)
        // this.leftClickFlag = true;
    },
    // 左侧滚动
    handleScrollLeft() {
        let leftHeight = this.$refs.leftBox[0].clientHeight;
        let height = (this.current - 6) * leftHeight;
        if (this.current > 6) {
            this.$refs.scrollTop += height;
        }
        if (this.current <= 6) {
            this.$refs.scrollTop = 0;
        }
    },
    // 滚动时触发
    handleScroll() {
        this.scrollY = this.$refs.scroll.scrollTop; // 先获取滚动元素的scrollTop，主要用它来进行判断
        if (this.scrollY < this.arr[1].distance) {
            this.current = 0;
        } else {
            for (let i = 0; i < this.listHeight.length; i++) {
                let start = this.listHeight[i + 1]; // 右边模块内容的高度
                let end = this.listHeight[i + 2]; // 右边模块内容的高度 加上 右边模块标题的高度
                if (this.scrollY >= start && this.scrollY < end) {
                    if (this.leftClickFlag == false) {
                    //如果右侧数据过少，不触发右侧滚动
                        this.current = i + 1;
                    }
                    if (this.leftClickFlag) {
                    //设置完之后立马重置，右侧滚动触发左侧
                        this.leftClickFlag = false;
                    }
                    this.handleScrollLeft();
                    return;
                }
            }
        }
    },
  },
};
</script>

<style lang='less' scoped>
.flex-one {
  display: flex;
  justify-content: center;
  align-content: center;
}
.nmc-content {
  background: #fff;
  padding: 20px;
  .nmc-wrapper {
    width: 100%;
    margin: 0 auto;
    height: calc(100vh - 10rem);
    display: flex;
    .left {
        width: 108px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        color: #333333;
        background: #F7F7F7;
        &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        > div {
            font-size: 0.7rem;
            font-weight: 500;
            width: 108px;
            height: 2.5rem;
            position: relative;

            .top {
                position: absolute;
                top: -0.5rem;
                right: 0;
                width: 0.5rem;
                height: 0.5rem;
                background: white;
            }
            .bottom {
                position: absolute;
                top: 2.5rem;
                right: 0;
                width: 0.5rem;
                height: 0.5rem;
                background: white;
            }
        }
        .active {
                color: #000;
                font-weight: 700;
                display: flex;
                align-items: center;
                border-radius: 0;
            .line {
                width: 0.15rem;
                height: 0.75rem;
                object-fit: cover;
                margin: 0 0.5rem 0 0;
            }
        }
        .common {
            cursor: pointer;
            color: #808080;
            line-height: 2rem;
        }
    }

    .right {
        background: white;
        position: relative;
        flex: 1;
        width: 100%;
        height: 100%;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem;

        .main-content {
            position: relative;
            width: 100%;
        .top-title {
          height: 2rem;
          text-align: left;
          line-height: 2rem;
          font-size: 0.65rem;
          font-weight: 500;
          color: #333333;
        }
        .bottom-content {
          // display: flex;
          // flex-wrap: wrap;
          // min-height: 17rem;
          // margin: 0 0.5rem;
          .bottom-ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .bottom-item {
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                margin-right: 10px;
                margin-bottom: 10px;
                position: relative;
                cursor: pointer;
                border-radius: 4px;
            }
            .child-gray{
                color: rgba(128, 128, 128, 1);
                background: rgba(247, 247, 247, 1);
            }
            .child-active{
                color: #fff;
                background: rgba(42, 130, 228, 1);
            }
          }
        }
      }
    }
  }
  .btn-box{
    text-align: right;
    width: 800px;
    margin: 20px auto;
    .btn{
      font-size: 14px;
      padding: 0;
      color: #fff;
      width: 96px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      border-radius: 25px;
    }
    .b-bg{
      background: #2967E3;
    }
    .l-bg{
      background: #00BAAD;
    }
    .gray{
        background: #A6A6A6;
    }
  }
}
</style>